<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="connect">连接</button>
    <button id="send" disabled="true">发送数据</button>
    <br>
    从服务端接受到的数据:
    <br>
    <span id="recv"></span>
    <script>
        let connect = document.querySelector("#connect")
        let send = document.querySelector("#send")
        let recv = document.querySelector("#recv")
        let ws = null;
        connect.onclick = () => {
            ws = new WebSocket('ws://localhost:9998')
            ws.onopen = () => {
                console.log("连接成功...");
                send.disabled = false;
            }
            ws.onclose = () => {
                console.log("连接失败...");
                send.disabled = true;
            }
            ws.onmessage = (msg) => {
                console.log("接收到服务器发来的数据");
                console.log(msg);
                recv.innerHTML = msg.data
            }
        }

        send.onclick = () => {
            // ws.send("前发后")
            let getData = JSON.stringify({
                action: 'getData',
                socketType: 'trendData',
                chartName: 'trend',
                value: ''
            })

            let fullScreen = JSON.stringify({
                action: 'fullScreen',
                socketType: 'fullScreen',
                chartName: 'trend',
                value: true
            })

            let chemeChange = JSON.stringify({
                action: 'chemeChange',
                socketType: 'chemeChange',
                chartName: '',
                value: 'chalk'
            })

            ws.send(chemeChange)
        }
    </script>
</body>

</html>